<template>
  <div class="brand">
    <div class="title">
      <h3>人气推荐</h3>
    </div>
    <van-card
      v-for="item in hotGoodsList"
      :key="item.id"
      :price="item.retail_price |  priceFilter"
      :desc="item.goods_brief"
      :title="item.name"
      :thumb="item.list_pic_url"
      @click="toShop(item.id)"
    />
  </div>
</template>

<script>
export default {
  props: {
    hotGoodsList: Array
  },
  methods:{
    toShop(e){
      this.$router.push('/details/'+e)
}
  }
};
</script>

<style lang="less" scoped>
.brand {
  border-top: 10px solid #f4f4f4;
  .title {
    text-align: center;
    h3 {
      font-weight: normal;
    }
  }
  .van-card {
    padding: 0 20px;

    background-color: #fff;
    .van-card__header {
      background-color: #fafafa;
      .van-card__content {
        margin-top: 10px;
        .van-card__title {
          font-size: 20px;
          height: 30px;
          line-height: 30px;
        }
        .van-card__bottom {
          line-height: 40px;

          .van-card__price {
            color: darkred;
          }
        }
      }
    }
  }
}
</style>